<template>
  <div>
    <vxe-form
      ref="xForm"
      title-align="right"
      title-width="100"
      :data="formData2"
      :rules="formRules2"
      :loading="loading2"
      @submit="submitEvent2"
      @reset="resetEvent">
      <vxe-form-item title="角色" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="登录用户名" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="密码" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="昵称" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="头像" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="手机号码" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="邮箱" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="描述" field="address" span="24">
        <template v-slot>
          <vxe-textarea v-model="formData2.description" placeholder="请输入角色描述" clearable></vxe-textarea>
        </template>
      </vxe-form-item>
      <vxe-form-item title="是否启用" field="status" span="24">
        <template v-slot>
          <vxe-switch v-model="formData2.status" on-label="启用" off-label="禁用"></vxe-switch>
        </template>
      </vxe-form-item>
      <vxe-form-item align="center" span="24">
        <template v-slot>
          <vxe-button type="submit" status="primary">添加角色</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { roleAdd } from '@/api/role'

let formData = {
  name: '',
  description: '',
  status: true
}
export default {
  name: 'add',
  data () {
    return {
      loading2: false,
      formRules2: {
        name: [
          { required: true, message: '请输入角色名称' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符' }
        ]
      },
      formData2: Object.assign({}, formData)
    }
  },
  methods: {
    submitEvent2 () {
      this.$XModal.alert({
        message: '添加中，请稍后',
        status: 'loading',
        id: 'loading'
      })
      roleAdd({
        name: this.formData2.name,
        description: this.formData2.description,
        status: this.formData2.status ? 1 : 0
      }).then(({ data, status }) => {
        if (status === 200) {
          // 添加成功
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'success'
          })
          this.formData2 = Object.assign({}, formData)
          this.$emit('roleAdd')
        } else {
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'error'
          })
        }
      }).catch((error) => {
        this.$XModal.close('loading')
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    resetEvent () {

    }
  }
}
</script>

<style scoped>

</style>
